<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:README</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h1 id="simple3d">Simple3D</h1>
<h2 id="-">目的</h2>
<ul>
<li>使用 Three.js 解析、加载、预览 3D 模型文件</li>
</ul>
<h2 id="-">用法</h2>
<ul>
<li>macOS 或 Linux 运行 <code>yarn build</code></li>
<li><p>Windows 运行 <code>yarn build-win</code></p>
<p>代码构建成功后, 将 <code>dist</code> 下构建成功的文件拷贝至工程目录 <code>public</code> 等静态目录下，或者，将文件拷贝至 OSS，使用 iframe 调用。</p>
</li>
</ul>
<h2 id="-">参数说明</h2>
<p>使用 URL 进行参数注入</p>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>值</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>path</td>
<td>url</td>
<td>模型存储地址</td>
<td>&#39;&#39;</td>
</tr>
<tr>
<td>panel</td>
<td>1、0</td>
<td>右上角控制面板</td>
<td>0</td>
</tr>
<tr>
<td>infoPanel</td>
<td>1、0</td>
<td>左上角模型信息面板</td>
<td>0</td>
</tr>
</tbody>
</table>
<p>例如：</p>
<pre><code class="lang-js">import React, { useEffect, useState } from &quot;react&quot;;

const ThreeDPreview = () =&gt; {
  const [url, setUrl] = useState(&quot;&quot;);

  const queryModalPath = () =&gt; {
    setTimeout(() =&gt; {
      const modal = &quot;https://*/*.FBX&quot;;
      setUrl(modal);
    }, 1000);
  };

  useEffect(() =&gt; {
    queryModalPath();
  }, []);

  return (
    &lt;div&gt;
      &lt;iframe
        src={`/3Dlib/index.html?panel=1&amp;infoPanel=1&amp;path=${url}`}
        title=&quot;3D&quot;
        style={{ width: &quot;100%&quot;, border: 0 }}
      /&gt;
    &lt;/div&gt;
  );
};

export default ThreeDPreview;
</code></pre>
<h2 id="-">模型信息收集规则</h2>
<p>模型加载完成后，会把模型信息存储到 sessionStorage</p>
<p>模型信息对应规则：</p>
<ul>
<li>格式 (转大写) <code>Ext</code></li>
<li>尺寸 (体积) <code>FileSize</code></li>
<li>贴图数量 <code>Texture</code></li>
<li>动画 <code>Animation</code></li>
<li>三角面数量 <code>Triangles</code></li>
<li>顶点数 <code>Vertices</code></li>
<li>UV 信息 <code>HasUv</code></li>
</ul>
<h3 id="-">收集过程</h3>
<p>FBXLoader 源码修改点：</p>
<ul>
<li>劫持模型数据流 并 将数据绑定到 <code>FBXLoader</code> 构造函数 <code>fileSzie</code> 属性上。</li>
<li><p>劫持模型二进制数据 <code>objectTree</code> 并和模型对象 <code>object</code> 信息一并由 <code>load</code> 方法返回。</p>
<pre><code class="lang-js">// src/loaderFuncMap/fbxLoadModel.js
const loader = new FBXLoader();
loader.load(
  this.modelPath,
  ({ object, objectTree }) =&gt;
    this.publicLoadCallback(object, loader.fileSize, objectTree),
  this.loadProgress.bind(this)
);
</code></pre>
</li>
</ul>
<h3 id="-">收集参数说明</h3>
<ul>
<li><p>3DMAX 绘制：</p>
<p>采用 Direct3D 的 API 规范。多点多面的信息可以共享到 <code>法线</code> 和 <code>UV</code> 中，最大限度节省 <code>顶点</code> 数量，加快渲染。</p>
</li>
<li><p>浏览器绘制：</p>
<p>采用 WebGL 的 API 规范。当 <code>法线</code> 和 <code>UV</code> 出现共享信息时，即会分裂出新的 <code>顶点</code>。「Unity3D 中使用的 OpenGL 也采用这种算法」</p>
<p><em>Direct3D 是 DirectX 的一部分，微软开发，Windows 独享</em></p>
<p><em>WebGL OpenGL 开源框架，兼容全平台</em></p>
</li>
</ul>
<p><strong>单纯的数据统计，并没有对错之分。只是底层框架采用的图形 API 算法不同。</strong></p>
<p><strong>Unity3D 遇到导入顶点数量上限的问题这里不做讨论。该工程只负责 Threejs 二次封装用于浏览器预览模型</strong></p>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>